<template>
  <div class="approval">
    <div class="title">业务审批表</div>
    <a-table
      class="table"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      size="middle"
      tableLayout='fixed'
      :scroll="scroll" 
    >
      <template
        slot="name"
        slot-scope="text"
      >
        <a>{{ text }}</a>
      </template>
    </a-table>
  </div>
</template>

<script>
import { getFormmain } from "../../api/server";
import moment from "moment";
export default {
  name: "Approval",
  data() {
    return {
      ws: null,
      scroll:{ y: window.innerHeight/2 -40 -45 -45, x: 1500},
      columns: [
        {
          title: "申请时间",
          dataIndex: "requestTime",
          width: 150,
          rowKey: "requestTime",
          ellipsis:true
        },
        {
          title: "审批结果",
          dataIndex: "result",
          width: 200,
          rowKey: "result",
          ellipsis:true
        },
        {
          title: "申请单号",
          dataIndex: "requestOrder",
          width: 200,
          rowKey: "requestOrder",
          ellipsis:true
        },
        {
          title: "单位",
          dataIndex: "requestDepartment",
          width: 200,
          rowKey: "requestDepartment",
          ellipsis:true
        },
        {
          title: "申请人",
          dataIndex: "requestPerson",
          width: 100,
          rowKey: "requestPerson",
          ellipsis:true
        },
        {
          title: "厂区",
          dataIndex: "factory",
          width: 200,
          rowKey: "factory",
          ellipsis:true
        },
        {
          title: "电话",
          dataIndex: "requestPhone",
          width: 200,
          rowKey: "requestPhone",
          ellipsis:true
        },
        {
          title: "动火部位",
          dataIndex: "usePoint",
          width: 200,
          rowKey: "usePoint",
          ellipsis:true
        },
        {
          title: "开始时间",
          dataIndex: "startTime",
          width: 150,
          rowKey: "startTime",
          ellipsis:true
        },
        {
          title: "截止时间",
          dataIndex: "endTime",
          rowKey: "endTime",
          width: 150,
          ellipsis:true
        },
        // {
        //     title:"证件",
        //     dataIndex:"certificate",
        //     width:150,
        //     rowKey:"certificate"
        // },
        
        // {
        //     title:"审批意见",
        //     dataIndex:"opinion",
        //     width:150,
        //     rowKey:"opinion"
        // },
        {
          title: "动火等级",
          dataIndex: "level",
          rowKey: "level",
          ellipsis:true
        },
      ],
      dataSource: [
        {
          name: "张三",
          phone: "18888888888",
          info:
            "生产保障事业部申请熙河厂区一车间104出酒口2021年3月26日17点30分动火已审批完成",
        },
      ],
      timeID: -1,
    };
  },
  watch: {
    "$store.state.factoryId": function (newVal, oldVal) {
      if (this.ws != null) this.ws.close();
      //this.initWebSocket(newVal);
    },
  },
  created() {
    this.timeID = setInterval(() => {
      getFormmain(10).then((res) => {
        this.dataSource = res;
        this.dataSource.map((item) => {
          item.requestTime = item.requestTime
            ? moment(item.requestTime).format("YYYY-MM-DD")
            : "";
          item.startTime = item.startTime
            ? moment(item.startTime).format("YYYY-MM-DD")
            : "";
          item.endTime = item.endTime
            ? moment(item.endTime).format("YYYY-MM-DD")
            : "";
        });
      });
    }, 5000);
  },
  beforeDestroy() {
    this.ws.close();
    this.ws = null;
    this.$store.commit("setFactoryId", null);
    clearInterval(this.timeID);
  },
  methods: {
    initWebSocket(id) {
      this.ws = new WebSocket(`${process.env.VUE_APP_WS_BASE}/webSocket/${id}`);
      this.ws.onopen = this.webSocketOpen;
      this.ws.onmessage = this.webSocketMessage;
      this.ws.onclose = this.webSocketClose;
    },
    webSocketOpen() {
      console.log("Connection open ...");
      this.ws.send("Hello WebSockets!");
    },
    webSocketMessage(evt) {
      console.log("Received Message: " + evt.data);
      //this.ws.send("Hello WebSockets!");
    },
    webSocketClose() {
      console.log("Connection closed.");
    },
  },
};
</script>

<style lang="scss" scoped>
.approval {
  width: 100%;
  height: 100%;
  .title {
    height: 10%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .table {
    width: 100%;
    height: 90%;
    //overflow: scroll;
    ::v-deep .ant-table-thead th {
      background-color: rgb(77, 77, 76);
      border-bottom: none;
      color: white;
    }
    ::v-deep .ant-table-tbody > tr > td {
      border-bottom: none;
      color: white;
    }
    ::v-deep .ant-table-tbody > tr:hover>td{
        background: rgb(0, 200, 168);
    }
    ::v-deep .ant-table-body{
      background-color: rgb(77, 77, 76);
    }
  }
}
</style>